<template>
<view class="container">
  <view class="pageInner">

    <view class="form">
      <view class="formItem mb-35">
        <text class="iconfont icon-shouji icon-other icon-other-left" ></text>
        <input type="number" placeholder="请输入已注册手机号" class="input" v-model="user.username" :class="isNumInputFocus?'inputFocus':''" @focus="isNumInputFocus = true" @blur="isNumInputFocus = false"/>
      </view>

      <view class="formItem mb-80">
        <text class="iconfont icon-yinsi-01 icon-other icon-other-left" ></text>
        <input :type="isShowPassword?'text':'password'" placeholder="请输入密码" class="input inputPassword" v-model="user.password" :class="isPswInputFocus?'inputFocus':''" @focus="isPswInputFocus = true" @blur="isPswInputFocus = false"/>
        <text 
          class="iconfont icon-other icon-other-right" 
          :class="isShowPassword?'icon-chakan-01':'icon-yincang-01'" 
          @click="isShowPassword = !isShowPassword"
        ></text>
      </view>

      <view class="formBtn mb-35">
        <button 
          class="button blue flex-center fz-32" 
          :class="{'btn-disabled-blue':!isAgreeProtocol}" 
          @click="onLoginForPhone"
        >
          手机号登录
        </button>
      </view>
    </view>

    <view class="protocolBox" >
      <radio color="#b1607e" :checked="isAgreeProtocol" style="transform:scale(0.7)" @click="isAgreeProtocol = !isAgreeProtocol"/>
      <view>
        <text>点击注册或登录即表示您同意</text>
        <text class="protocol">《用户服务协议》、</text>
        <text class="protocol">《隐私政策》</text>
      </view>
    </view>
  </view>
</view>
</template>

<script>
import { login } from "@/apis/login/index"
export default {
  data() {
    return {
      user:{
        username:'18955556666',
		userId:'4',
        password:'123'
      },

      isShowPassword: false,
      isAgreeProtocol:true,

      isPswInputFocus:false,
      isNumInputFocus:false,
    }
  },
  computed: {

  },
  onLoad() {
  },
  methods: {
    onAgree(){
      this.isAgreeProtocol = true
    },
    
    onLoginForPhone(){
      uni.showLoading({ title: '加载中', mask: true });

      let params = {
        ...this.user,
      }

      login(params).then(res=>{
        if (res.data) {
          uni.hideLoading();
          uni.setStorageSync('token', res.data.tokenValue);
          uni.switchTab({
            url: '/pages/index/index'
          });
        }
      }).catch((e)=>{
        console.log(e);
        uni.hideLoading();
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  background: #fff;
}

.pageInner {
  padding: 80rpx 64rpx;

  .logoBox {
    display: flex;
    align-items: center;
    margin-bottom: 120rpx;

    .logoImg {
      width: 120rpx;
      height: 120rpx;
      display: block;
    }

    .partLine {
      width: 0rpx;
      height: 100rpx;
      border: 2rpx solid #D8D8D8;
      margin: 0 24rpx 0 16rpx;

    }

    .logoTextBox {
      font-size: 28rpx;
      font-weight: normal;
      line-height: 42rpx;

      .text1 {
        color: #2A2C39;
        font-weight: bold;
      }

      .text2 {
        color: #6e6e6e;
      }
    }
  }

  .form {
    .formItem {
      width: 100%;
      height: 100rpx;
      position: relative;

      .icon-other{
        width: 100rpx;
        height: 100rpx;
        font-size:50rpx;
        // color: red;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .icon-other-left{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
      }

      .icon-other-right{
        position: absolute;
        top: 0;
        right: 0;
        z-index: 100;
      }

      .input {
        width: 100%;
        height: 100%;
        border-radius: 24rpx;
        background: rgba(42, 44, 57, 0.04);
        padding-left: 100rpx;
        box-sizing: border-box;
        font-size: 32rpx;
      }

      .inputPassword {
        padding-right: 100rpx;
      }

      .inputFocus{
        border: 4rpx solid #b1607e;
      }

    }
  }

  .protocolBox {
    width: 100%;
    font-size: 24rpx;
    display: flex;
    // align-items: center;
    color: #3D3D3D;

    .dot {
      display: block;
      margin: 10rpx 10rpx 0 0;
      border-radius: 50%;

      width: 24rpx;
      height: 24rpx;
      background: rgba(42, 44, 57, 0.04);
      box-sizing: border-box;
      border: 1px solid rgba(42, 44, 57, 0.12);
    }

    .activeDot{
      background:  #b1607e;
    }

    .protocol {
      color: #b1607e;
    }
  }
}
</style>
